<template>
    <div class="kg-head-he"></div>
    <header class="kg-head reg-top">
        <div class="dqxz"  @click="back"><i class="micon">&#xe61e;</i></div>
        <div class="search_box show-cansu">
            报名付款
        </div>
    </header>
    <!---->
    <div class="kg-center">
            <!---->
            <div class="kg-ksbox mb25">
                <div class="title">
                <div class="title_a">报考信息</div>
                </div>
                
                <div class="kg-ksxqbox">
                    <div class="kg-ksxq-list">
                        <div class="kg-ksxq-lista">考点信息</div>
                        <div class="kg-ksxq-listb">{{sign.addr_title}}</div>
                    </div>
                    <div class="kg-ksxq-list">
                        <div class="kg-ksxq-lista">考级内容</div>
                        <div class="kg-ksxq-listb">{{sign.major_first}} / {{sign.major_second}} / {{sign.grade}} / {{sign.sign_item}}</div>
                    </div>
                </div>
            </div>
            
            <div class="kg-ksbox mb25">
                <div class="title">
                <div class="title_a">费用明细</div>
                </div>
                
                <div class="kg-ksxqbox">
                    <div class="xy-kjfyli">
                        <div>考级费<span>￥ {{sign.majorPrice.grade_fee}}</span></div>
                        <div>证书费<span>￥ {{sign.majorPrice.cert_fee}}</span></div>
                        <div>报名费<span>￥ {{sign.majorPrice.sign_fee}}</span></div>
                    </div>
                    <div class="xy-kjfyzj">
                        总计：<span>￥ {{sign.pay_price}}</span>
                    </div>
                </div>
            </div>
    <!---->   
        <div class="kg-ksbox mb25">
            <div class="title">
            <div class="title_a">扫码支付</div>
            </div>
            
            <div class="kg-ksxqbox">
                <div class="xy-kdewm">
                <span class="red">*</span> 请识别/扫描下方二维码完成付款，并上传付款详情截图。
                <div class="xy-kdewm-img" v-if="sign.address && sign.address.pay_image">
                    <img  v-for="(item,i) in sign.address.pay_image" :key="i" :src="item.external_url" />
                </div>
                <div class="xy-kdewmtxt">{{sign.addr_title}}考点收款码</div>
                </div>
            </div>
            
            <div class="kg-ksxqbox">
                <div class="kg-ksxq-list height-auto bg-none">
                    <div class="kg-ksxq-lista"><span class="red">*</span> 凭证上传</div>
                    <div class="kg-ksxq-listb">
                        <!-- <input type="button" value="请选择"/> -->
                        <a-upload
                            name="avatar"
							list-type="picture-card"
							class="avatar-uploader"
                            :capture="null"
                            action="/upload/image"
							:show-upload-list="false"
							:customRequest="onUpload"
						>
						<div v-if="pay_image_path"><img  :src="pay_image_path" alt="avatar" /></div>
						<div v-else >
							<loading-outlined v-if="loading"></loading-outlined>
							<plus-outlined v-else></plus-outlined>
							<div class="ant-upload-text">{{percentage > 0?percentage+'%':'上传'}}</div>
						</div>
						</a-upload>
                    </div>
                </div>
            </div>
        </div>
        <!---->
        <button class="but-a mt50" v-if="pay_image_id"  @click="savePayImage">立即保存</button>
        <button class="but-a mt50" v-else >请上传支付截图</button>
        <!---->

        
    <!---->   	
    </div>
</template>

<script>
import { detail,savePayImage} from '@/api/sign/index'
import * as UploadApi from '@/api/upload'
import { message } from 'ant-design-vue'
import { defineComponent } from "vue";

    export default defineComponent({
        data(){
            return {
                uploadUrl: UploadApi.image,
                percentage:0,
                sign_id:0,
                sign:{},
                pay_image_id:0,
                pay_image_path:'',
            }
        },
        created(){
            this.sign_id = this.$route.query.sign_id;
            this.getSign();
        },
        methods:{
            back(){this.$router.back()},
            getSign(){
                detail({sign_id:this.sign_id}).then(result=>{
                    this.sign = result.data.sign;
                    this.pay_image_id   = this.sign.pay_image_id;
                    this.pay_image_path = this.sign.payImage.external_url
                })
            },
            savePayImage(){
                let pramas = {
                    sign_id     :this.sign_id,
                    pay_image_id:this.pay_image_id
                }
               
                savePayImage(pramas).then(result=>{
                   
                    message.success(result.message, 1.5);
                    this.$router.push('/signList');
                })
            },
            // 事件: 自定义上传
            onUpload (info) {
                this.isLoading = true;
                // 构建上传参数
                const formData = new FormData();
                formData.append('file', info.file)
                // 开始上传
                this.uploadUrl(formData,(progress)=>{
					this.percentage = parseInt(progress.progress*100);
				    })
                    .then((values) => {
                        this.isLoading = false;
                        message.success(values.message, 1.5)
                        this.pay_image_id = values.data.fileInfo.file_id;
                        this.pay_image_path = values.data.fileInfo.external_url;
                    })
            },
        }

    })
</script>
<style scoped>
.kg-ksxq-lista{ width:2.2rem;}
.xy-kdewmtxt{margin: 0.1rem 0 0.373333rem;text-align: center; font-weight: bold; font-size: .4rem;}
::v-deep .xy-kdewm-img{ margin-bottom: 0; display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; width: 100% !important;}
::v-deep .xy-kdewm-img img{max-width:calc(50% - .1rem ); width:calc(50% - .1rem ); margin-right:.2rem;}
::v-deep .xy-kdewm-img img:nth-child(2n){margin-right: 0;}
</style>